<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/shopping.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<header></header>
		<!-- 右侧边栏 -->
			<aside></aside>
		<!-- 中间 -->
		<div id="center">
			<div id="center-gou">
				<div id="center-gou-left">
					<img src="img/shopping/g1.png" >
				</div>
				<div id="center-gou-right">
					<h3>您的购物车还是空的！</h3>
					<p>您的购物车当前并未选购任何商品。</p>
					<p><a href="list.html">马上去购物 »</a></p>
				</div>
			</div>
			<div id="center-gouwu">
				<div id="center-gouwu-center">
					<h1>购物车<span>Shopping Cart</span></h1>
				</div>
				<div class="center-gouwu-bottom">
					<div class="center-gouwu-bottom-to">
						<ul>
							<li>
								<label>
								<input type="checkbox" name="" id="" value="" />
								全选
								</label>
							</li>
							<li>商品</li>
							<li style="	padding: 0;">单价</li>
							<li>数量</li>
							<li style="	padding: 0;">小计</li>
							<li>操作</li>
						</ul>
						<div class="clear"></div>
					</div>
					<div class="center-gouwu-bottom-cen"></div>
					<div class="center-gouwu-bottom-bot">
						<ul>
							<li>
								<label>
								<input type="checkbox" name="" id="" value="" />
								全选
								</label>
							</li>
							<li>
								<a href="" class="sc">删除选中</a>
							</li>
							<li style="	padding: 0;">
								<p>已选择<span class="zong"></span>件商品,优惠后金额 ： ￥<span class="jg"></span></p>
							</li>
							<li><a href="" class="zj">去结算</a></li>
						</ul>
						<div class="clear"></div>
					</div>
				</div>		
			</div>
		</div>
		<!-- 底部 -->
		<footer></footer>
	</body>
</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookieTools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("header").load("head.html")
	$("footer").load("footer.html")
	// 右引入侧边栏
	$("aside").load("sidebar.html");

	// if(getCookie("username") !=''){
	// 	$("#center-gouwu").css({
	// 		display:"block"
	// 	})
	// 	$("#center-gou").css({
	// 		display:"none"
	// 	})
	// }else{
	// 	$("#center-gouwu").css({
	// 		display:"none"
	// 	})
	// 	$("#center-gou").css({
	// 		display:"block"
	// 	})
	// }
	if($(".center-gouwu-bottom-cen").html()!=""){
		$("#center-gouwu").css({
			display:"block"
		})
		$("#center-gou").css({
			display:"none"
		})
	}else{
		$("#center-gouwu").css({
			display:"none"
		})
		$("#center-gou").css({
			display:"block"
		})
	}
		$.get("./php/getShoppingCart.php","vipName="+getCookie("username"), function(data){
			add(data);
		})
		function add(data){
			let a = JSON.parse(data);
			// console.log(a);
			for(let i = 0;i<a.length;i++){
			let b = $("<ul></ul>")
				b.html(
					`
					<li Style="" id="${a[i].goodsId}">
						<label>
						<input type="checkbox" name="" id="" value=""  />
						&nbsp;&nbsp;&nbsp;&nbsp;
						</label>
					</li>
					<li class="xs">
						<a href="" class="tp"><img src="${a[i].goodsImg}" ></a>
						<div id="center-gouwu-bottom-cen-y">
							<h5><a href="" class:"danjia">${a[i].goodsName}</a></h5>
							<p class="js">XQB70-20D0B</p>
							<p style="width: 274px;">${a[i].goodsDesc}</p>
						</div>
					</li>
					<li style="margin-top: 30px;">
					￥
					<span style="margin-top: 30px;" class="oxj">${a[i].goodsPrice}</span>
					</li>
					<li class="sl" Style="margin-top:12px">
						<button type="button" class="jia">+</button>
						<span class="shuliang">${a[i].goodsCount}</span>
						<button type="button" class="jian">-</button>
					</li>
					<li style="	padding-top:20px;"class="xiaoji">${a[i].goodsPrice*1*a[i].goodsCount*1}</li>
					<li class="shanchuba"><a href="#" style="margin-top: 10px;display: block;	text-align: left; width:50px" >删除</a></li>
					<div class="clear"></div>
					`
				).prependTo($(".center-gouwu-bottom-cen"))
			}	
			if($(".center-gouwu-bottom-cen").html()!=""){
				$("#center-gouwu").css({
					display:"block"
				})
				$("#center-gou").css({
					display:"none"
				})
			}else{
				$("#center-gouwu").css({
					display:"none"
				})
				$("#center-gou").css({
					display:"block"
				})
			}
			// 购物车
			class shopping{
				// 获取总共的商品
				sumSp(){
					let Sp=0;
					for(let i=0;i<$(".shuliang").length;i++){
						
						Sp += $(".shuliang").eq(i).html()*1;
						// console.log($(".xiaoji").eq(i));
					} 
					$(".zong").html(Sp);
				}
				// 获取总共的金额
				SumMoney(){
					let Je=0;
					for(let i=0;i<$(".xiaoji").length;i++){
						console.log($(".xiaoji").length);
						Je+=$(".xiaoji").eq(i).html()*1;
					} 
					$(".jg").html(Je);
				}
				
				// 获取小计
				// 数量*单价
				Subtotal(sum,univalence){
					return sum*univalence;
				}
				// 减少商品
				decreaseSp(btn){
					let osl = btn.prev();
					let that = this;
					// 减少数量
					if(osl.html()>0){
						osl.html(osl.html()*1-1)
					}
					// 更新数量
					this.sumSp();
					// 更新小计
					btn.parent().next().html(this.Subtotal( osl.html()*1 , btn.parent().prev().children().html()*1));
					//更新总价格
					this.SumMoney();
					//更新数量
					let Id = btn.parent().prev().prev().prev().attr("id");
					console.log(Id);
					$.get("./php/updateGoodsCount.php","vipName="+getCookie("username")+"&goodsId="+Id+"&goodsCount="+osl.html()*1,function(data){
						console.log(data);
					})
					
				}
				//增加商品
				IncreaseSp(btn){
					let that = this;
					let osl = btn.next();
					// 增加数量
					osl.html(osl.html()*1+1);
					// 更新数量
					this.sumSp();
					// 更新小计
					// console.log(osl.html()*1);
					// console.log( btn.parent().prev().children().html());
					btn.parent().next().html(this.Subtotal( osl.html()*1,btn.parent().prev().children().html()*1));
					//更新总价格
					this.SumMoney();
					//更新数量
					let Id = btn.parent().prev().prev().prev().attr("id");
					$.get("./php/updateGoodsCount.php","vipName="+getCookie("username")+"&goodsId="+Id+"&goodsCount="+osl.html()*1,function(data){
						console.log(data);
					})
				}
				// 点击按钮事件
				click(){
					let that = this
					for(let i=0 ;i<$("button").length;i++){
						if(i%2){
							$("button").eq(i).click(function(){
								that.decreaseSp($(this)) 	;
							})
						}else{
							$("button").eq(i).click(function(){
								that.IncreaseSp($(this));
							})
						}	
					} 
				}
			}
			let gou= new shopping();
			gou.sumSp();
			// gou.Subtotal();
			gou.SumMoney();
			gou.click();
			// 点击删除
			$(".shanchuba").click(function(){
				let Id = $(this).prev().prev().prev().prev().prev().attr("id");
				let shan = $(this).parent();
				$.get("./php/deleteGoods.php","vipName="+getCookie("username")+'&goodsId='+Id,function(data){
					console.log(data);
					if(data==1){
					shan.remove();
					if($(".center-gouwu-bottom-cen").html() !=""){
						$("#center-gouwu").css({
							display:"block"
						})
						$("#center-gou").css({
							display:"none"
						})
					}else{
						$("#center-gouwu").css({
							display:"none"
						})
						$("#center-gou").css({
							display:"block"
						})
					}
					}	
				})
				
			})
		}
</script>